<template>
  <debby-form
    ref="debbyForm"
    v-model="dataForm"
    label-width="100px"
    label-position="top"
    :schema="formSchema"
    @onFieldChange="onFieldChange"
  />
</template>
<script type="text/jsx">
import DebbyForm from '@/components/debby-form/index'
export default {
  name: 'FormNormal',
  components: { DebbyForm },
  data() {
    return {
      dataForm: {},
      formSchema: {
        type: 'object',
        ui: {
          class: 'custom-class-object'
        },
        properties: {
          grade: {
            type: 'string',
            default: '3',
            'ui:label': '年级',
            ui: {
              column: 12,
              style: {
                backgroundColor: '#fff',
                padding: '4px',
                marginTop: '4px'
              }
            },
            rules: function(formData) {
              return [
                {
                  required: true, message: formData.class, trigger: 'blur'
                }
              ]
            }
          },
          class: {
            type: 'string',
            ui: {
              label: '班级',
              column: 12,
              placeholder: '当年级为3的时候我就被禁用了',
              disabled: (formData) => {
                return formData.grade === '3'
              }
            },
            /**
             * 验证器同el-form的验证器 方法里面还支持this哦
             * @param formData
             * @returns {[{validator: validGrade, trigger: string, required: boolean}]}
             */
            rules: function(formData) {
              // 假装打印一下this
              const validGrade = (rule, value, callback) => {
                console.log(formData.grade)
                if (formData.grade < 10) {
                  callback(new Error('年级不能小于10'))
                }
              }
              return [
                {
                  required: true, validator: validGrade, trigger: 'blur'
                }
              ]
            }
          },
          other: {
            type: 'object',
            ui: {
              label: '属性'
            },
            properties: {
              stuNum: {
                type: 'string',
                ui: {
                  label: '学生数量'
                }
              },
              teaNum: {
                type: 'string',
                ui: {
                  label: '教师数量'
                }
              }
            }
          },
          students: {
            type: 'array',
            ui: {
              label: '学生信息'
            },
            items: {
              name: {
                type: 'string',
                ui: {
                  label: '姓名'
                },
                rules: function() {
                  const validName = (rule, value, callback) => {
                    if (!isNaN(value)) {
                      callback(new Error('不能为空并且不能输入数字哦'))
                    }
                  }
                  return [
                    {
                      required: true, validator: validName, trigger: 'blur'
                    }
                  ]
                }
              },
              students: {
                type: 'array-table',
                ui: {
                  label: '学生信息'
                },
                items: {
                  name: {
                    type: 'string',
                    ui: {
                      label: '姓名'
                    },
                    rules: function() {
                      const validName = (rule, value, callback) => {
                        if (!isNaN(value)) {
                          callback(new Error('不能为空并且不能输入数字哦'))
                        }
                      }
                      return [
                        {
                          required: true, validator: validName, trigger: 'blur'
                        }
                      ]
                    }
                  },
                  sex: {
                    type: 'boolean',
                    default: true,
                    ui: {
                      label: '性别',
                      widget: 'el-checkbox'
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 某个字段的值发生改变
    onFieldChange(idxChain, value, schema) {
      console.log(idxChain, value, schema)
    }
  }
}
</script>

<style>
.custom-class-object {
  background-color: #f2f2f2;
}
</style>
